<div class="row" id="postIdeaLog">
    <div class="col-md-12 baCardbox">

        <ba-card title=" Post An Idea" baCardClass="with-scroll">
            <div class="col-sm-1 edtorlabel ideatag ckeditcol">
                <label>Idea</label>
            </div>
            <div class="col-sm-11 contentrow editor">
                <input type="text" (focusout)="titleInputFouceOut()" [(ngModel)]="mySnippets"
                       (ngModelChange)="autoScrollFilter=false;getIdea(mySnippets)" (keypress)="onKeyPressUser($event)"
                       class="chkeditorIdeaContent form-control"/>
                <!-- <div class="autoScrollFilter postidea" *ngIf="!autoScrollFilter">
                     <div *ngFor="let item of items" (click)="titleClickHandler(item.title);">{{item.title}}</div>
                 </div>-->
            </div>

            <div class="col-sm-1 ckeditcol">
                <p class="editorlabel"><label class="description">Description</label></p>
                <p class="editorlabel" *ngIf="descriptionShow">
                    <label class="description" style="color:#FF0000">{{myKeyWordTip}}</label>
                </p>
                <div *ngIf="descriptionShow">
                    <div *ngFor="let item of myKeyWordList" style="color:#FF0000;text-align:right">{{item}}</div>
                </div>
            </div>


            <div class="col-sm-11 contentrow" [ngClass]="{'chkeditornoSuggestion': !cloudContentSuggestion.length}">
                <ckeditor debounce="500" (ready)="onReady($event)" [(ngModel)]="ckeditorContent" #ckEditor
                          class="chkeditorDescriptionContent" [config]="ckeConfig"></ckeditor>
                <div class="citationTree" *ngIf="cloudContentSuggestion.length>0 && sentenceSuggestShow">

                    <div style="background-color: transparent">
                        <p *ngIf="userVersion == 'Version_6'" class="keyword_container"
                           [ngClass]="{'animation': isSuccessful}">
                            <span class="key-note">Note:</span>
                            <span class="keyword_tip_green"> Building on others’ ideas  </span>
                            to propose an
                            <span class="keyword_tip_green">original </span>
                            idea that
                            <span class="keyword_tip_green">differs from others</span>
                            !
                        </p>
                        <p *ngIf="userVersion == 'Version_7'" class="keyword_container"
                           [ngClass]="{'animation': isSuccessful}">
                            <span class="key-note">Note:</span>
                            <span class="keyword_tip_green">  Building on others’ ideas </span>
                            to propose an idea that can be
                            <span class="keyword_tip_green">easily accepted and implemented</span>
                            !
                        </p>
                        <p *ngIf="userVersion == 'Version_9'" class="keyword_container"
                           [ngClass]="{'animation': isSuccessful}">
                            <span class="key-note">Note:</span>
                           <span class="keyword_tip_green">  Building on others’ ideas  </span>
                            to propose an
                            <span class="keyword_tip_green">original </span>
                            idea that
                            <span class="keyword_tip_green">differs from others</span>
                            !
                        </p>
                        <p *ngIf="userVersion == 'Version_10'" class="keyword_container"
                           [ngClass]="{'animation': isSuccessful}">
                            <span class="key-note">Note:</span>
                           <span class="keyword_tip_green">  Building on others’ ideas </span>
                           to propose an idea that can be
                           <span class="keyword_tip_green">easily accepted and implemented</span>
                           !
                        </p>
                        <p *ngIf="userVersion == 'Version_12'" class="keyword_container"
                           [ngClass]="{'animation': isSuccessful}">
                            <span class="key-note">Note:</span>
                           <span class="keyword_tip_green">  Building on others’ ideas </span>
                           to propose an
                           <span class="keyword_tip_green"> original  </span>
                           idea that can
                           <span class="keyword_tip_green">not only differs from others, but can be easily accepted and implemented</span>
                           !
                        </p>

                        <p *ngIf="userVersion == 'Version_13'" class="keyword_container"
                           [ngClass]="{'animation': isSuccessful}">
                            <span class="key-note">Note:</span>
                           <span class="keyword_tip_green">  Building on others’ ideas </span>
                           to propose an
                           <span class="keyword_tip_green"> original  </span>
                           idea that can
                           <span class="keyword_tip_green">not only differs from others, but can be easily accepted and implemented</span>
                           !
                        </p>

                    </div>
                    <div class="suggest-area" *ngIf="showSuggest">
                        <!--<div style="background-color: transparent;color: white">
                            You can access all 436317 ideas by scrolling down the list
                        </div>-->
                        <div *ngFor="let cloudContent of cloudContentSuggestion"
                             (click)="putSuggestion(cloudContent.content)" [innerHTML]="cloudContent.content"
                             class="auto_complete">
                        </div>
                        <div class="page-button" *ngIf="pageButtonShow">
                            <button type="submit" class="btn btn-primary downloadButton" (click)="loadMoreIdeas()">Show
                                More
                            </button>
                        </div>
                    </div>
                </div>


                <!--<div class="citationTree"  *ngIf="constContentSuggestion.length>0 && !sentenceSuggestShow">
                    <div style="background-color: transparent">
                        <p *ngIf="userVersion == 'Version_6'" class="keyword_container" [ngClass]="{'animation': isSuccessful}">
                            <span class="keyword_tip"> Building on others’ idea </span>
                            to
                            <span class="keyword_tip">support the core message of your original idea</span>
                            !
                        </p>
                        <p *ngIf="userVersion == 'Version_7'" class="keyword_container" [ngClass]="{'animation': isSuccessful}">
                            <span class="keyword_tip"> Building on others’ idea</span>
                            to
                            <span class="keyword_tip">modify the core message of your original idea</span>
                            !
                        </p>
                        <p *ngIf="userVersion == 'Version_9'" class="keyword_container" [ngClass]="{'animation': isSuccessful}">
                            <span class="keyword_tip"> Building on others’ idea </span>
                            to
                            <span class="keyword_tip">support the core message of your original idea</span>
                            !
                        </p>
                        <p *ngIf="userVersion == 'Version_10'" class="keyword_container" [ngClass]="{'animation': isSuccessful}">
                            <span class="keyword_tip"> Building on others’ idea</span>
                            to
                            <span class="keyword_tip">modify the core message of your original idea</span>
                            !
                        </p>
                    </div>
                    <div class="suggest-area" *ngIf="showSuggest">
                        &lt;!&ndash;<div style="background-color: transparent;color: white">
                            You can access all 436317 ideas by scrolling down the list
                        </div>&ndash;&gt;
                        <div *ngFor="let cloudContent of constContentSuggestion" (click)="putConstSuggestion(cloudContent)" [innerHTML] = "cloudContent">
                        </div>
                        <div class="page-button" *ngIf="pageIdeasButtonShow">
                            <button type="submit" class="btn btn-primary downloadButton" (click)="loadMoreConstIdeas()">Show More</button>
                        </div>
                    </div>
                </div>-->


            </div>
            <div class="keyword-area">
                <div class="col-sm-12" *ngIf="cloudContentSuggestionWords.length > 0 && userVersion == 'Version_3'">
                    <div class="col-sm-8 col-sm-offset-1 keyword-tips" [ngClass]="{'animation': isSuccessful}">
                        <span class="key-note">Note:</span>
                        <span class="keyword_green"> Use the following keywords </span>
                        to propose an
                        <span class="keyword_green">original</span>
                        idea that
                        <span class="keyword_green">differs from others</span> !
                    </div>
                </div>

                <div class="col-sm-12" *ngIf="cloudContentSuggestionWords.length > 0 && userVersion == 'Version_4'">
                    <div class="col-sm-8 col-sm-offset-1 keyword-tips" [ngClass]="{'animation': isSuccessful}">
                        <span class="key-note">Note:</span>
                        <span class="keyword_green"> Use the following keywords </span>
                        to propose an idea that can
                        <span class="keyword_green">be easily accepted and implemented </span> !
                    </div>
                </div>

                <div class="col-sm-12" *ngIf="cloudContentSuggestionWords.length > 0 && userVersion == 'Version_9'">
                    <div class="col-sm-8 col-sm-offset-1 keyword-tips" [ngClass]="{'animation': isSuccessful}">
                        <span class="key-note">Note:</span>
                        <span class="keyword_green"> Use the following keywords </span>
                        to propose an
                        <span class="keyword_green">original</span>
                        idea that
                        <span class="keyword_green">differs from others</span> !
                    </div>
                </div>


                <div class="col-sm-12" *ngIf="cloudContentSuggestionWords.length > 0 && userVersion == 'Version_10'">
                    <div class="col-sm-8 col-sm-offset-1 keyword-tips" [ngClass]="{'animation': isSuccessful}">
                        <span class="key-note">Note:</span>
                        <span class="keyword_green"> Use the following keywords </span>
                        to propose an idea that can
                        <span class="keyword_green">be easily accepted and implemented </span> !
                    </div>
                </div>

                <div class="col-sm-12" *ngIf="cloudContentSuggestionWords.length > 0 && userVersion == 'Version_11'">
                    <div class="col-sm-8 col-sm-offset-1 keyword-tips" [ngClass]="{'animation': isSuccessful}">
                        <span class="key-note">Note:</span>
                        <span class="keyword_green"> Use the following keywords </span>
                        to propose an
                        <span class="keyword_green"> original </span>
                        idea that can
                        <span class="keyword_green">not only differs from others, but can be easily accepted and implemented </span> !
                    </div>
                </div>

                <div class="col-sm-12" *ngIf="cloudContentSuggestionWords.length > 0 && userVersion == 'Version_13'">
                    <div class="col-sm-8 col-sm-offset-1 keyword-tips" [ngClass]="{'animation': isSuccessful}">
                        <span class="key-note">Note:</span>
                        <span class="keyword_green"> Use the following keywords </span>
                        to propose an
                        <span class="keyword_green"> original </span>
                        idea that can
                        <span class="keyword_green">not only differs from others, but can be easily accepted and implemented </span> !
                    </div>
                </div>

                <div class="col-sm-12 keyword-tip-row"
                     *ngIf="!keyWordHidden && cloudContentSuggestionWords.length > 0 && keyWordShow">
                    <div class="col-sm-1 idearow ckeditcol keyword-row">
                        <p class="editorlabel"><label class="categorytag" style="margin-top:0px;">Keywords</label></p>
                    </div>
                    <div class="col-sm-9 contentrow citedwords">
                        <div class="citationtreestructure">
                            <div *ngFor="let CitationtreeWord of cloudContentSuggestionWords">
                                <!--(click)="getTreeStructure(itemConstWord)"-->
                                <span [ngClass]="getKeywordClass(CitationtreeWord.percent)"> {{getKeywordSign(CitationtreeWord.percent)}} </span>
                                <span>{{CitationtreeWord.content}}({{CitationtreeWord.count}} ; {{CitationtreeWord.percent}}%)</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!--<div class="col-sm-12 keyword-tip-row"
                     *ngIf="!keyWordHidden && constContentSuggestionWords.length > 0 && !keyWordShow">
                    <div class="col-sm-1 idearow ckeditcol keyword-row">
                        <p class="editorlabel"><label class="categorytag" style="margin-top:0px;">Keywords</label></p>
                    </div>
                    <div class="col-sm-9 contentrow citedwords">
                        <div class="citationtreestructure">
                            <div *ngFor="let itemConstWord of constContentSuggestionWords">
                                &lt;!&ndash;(click)="getTreeStructure(itemConstWord)"&ndash;&gt;
                                <span [ngClass]="getKeywordClass(itemConstWord.percent)"> {{getKeywordSign(itemConstWord.percent)}} </span>
                                <span>{{itemConstWord.content}}({{itemConstWord.count}} ; {{itemConstWord.percent}}%)</span>
                            </div>
                        </div>
                    </div>
                </div>-->
            </div>


            <div class="col-sm-2 ckeditcol">
            </div>
            <div class="col-sm-8 postButtonMargin">
                <button class="btn btn-default btn-auth postbutton lgn"
                        [disabled]="submitPostDisable && !is_content_added" tooltip="Post a Idea" type="submit"
                        (click)="fillKeywords(mySnippets,ckeditorContent)">Post
                </button>
                <button class="btn btn-default btn-auth postbutton lgn save" [disabled]="!is_content_added"
                        type="submit" (click)="savePostIdea(mySnippets,ckeditorContent)">Save
                </button>
            </div>
        </ba-card>

    </div>
</div>
<div class="citationTreedialognew">
    <modal #citationTree>
        <modal-header>
            <div id="tree-simple" style="width:100%; height: 100%;"></div>
        </modal-header>
    </modal>
</div>


<div class="global-container" *ngIf="showIdeaTopWindow">
    <div class="float-window-container">


        <ngx-masonry #myMasonry class="mesonrySetWidth">
            <ngxMasonryItem columnWidth="500" class="brick-idea" *ngFor="let item of ideaShowList">
                <div class="card-container">

                    <div class="card-date">

                        {{formateDate(item.createdAt)}}
                    </div>

                    <div class="title">

                        {{item.title}}
                    </div>
                    <div class="content" (click)="showKeywordInfo($event, item)" [innerHTML]="item.content">
                        <!-- <p>
                             {{item.content}}
                         </p>-->
                    </div>
                </div>
            </ngxMasonryItem>
        </ngx-masonry>


        <!-- <div *ngFor="let item of ideaShowList" class="content-container">


             <ba-card title=" Post An Idea" baCardClass="with-scroll">
                 <div class="title">

                     {{item.title}}
                 </div>
                 <div class="content" [innerHTML]="item.content">
                     &lt;!&ndash; <p>
                          {{item.content}}
                      </p>&ndash;&gt;
                 </div>
             </ba-card>

             &lt;!&ndash;<div class="card-body">
                 <div class="title">

                     {{item.title}}
                 </div>
                 <div class="content" [innerHTML]="item.content">
                    &lt;!&ndash; <p>
                         {{item.content}}
                     </p>&ndash;&gt;
                 </div>
             </div>&ndash;&gt;

         </div>-->
        <div class="content-container my-footer">
            <button type="submit" class="btn btn-primary my-show-idea-button" (click)="showMoreModalIdeas()">Show More
            </button>
            <button type="submit" class="btn btn-primary my-show-idea-button" (click)="showIdeaTopWindow=false;sentenceSuggestShow=true">Close
            </button>
        </div>


    </div>
</div>
<div class="global-cover-container" *ngIf="showIdeaTopWindow">
</div>


<div class="userProfileModelAdmin">
    <modal #keywordModal modalClass="modal-lg modal-sm idea-show-modal">

        <modal-header>
            <!--fixed float window-->
            <div class="keyword-info-container">
                <p class="place-holder">
                    <span [ngClass]="getKeywordClass(currentClickKeywordCount)"> {{getKeywordTip(currentClickKeywordCount)}}  </span>
                    <span class="my-keyword-content">{{currentClickKeyword}}{{currentClickKeywordTip}}</span>
                </p>

            </div>

        </modal-header>

    </modal>
</div>

<button type="submit" class="btn btn-primary downloadButton show-button"
        *ngIf="showIdeaButton"
        (click)="showIdeaTopWindow = !showIdeaTopWindow;sentenceSuggestShow = !sentenceSuggestShow">
    <span *ngIf="!showIdeaTopWindow">Show Ideas</span>
    <span *ngIf="showIdeaTopWindow">Close Ideas</span>
</button>

<button type="submit" class="btn btn-primary downloadButton show-button close"></button>

<!-- <script>
  $('.tag-input__text-input').on('focus', function () {
    var uiAutoBox = $('ng2-dropdown-menu');
    $(this).parent().append(uiAutoBox);
  });
</script> -->
